<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>省市区三级联动下拉菜单</title>
<meta name="author" content="西米岛主">
<meta name="description" content="博客地址：http://my.oschina.net/ximidao">
<style type="text/css">
	.select-box{margin: 30px; padding: 30px; background-color: #70C104;}
	select{height: 30px;}
</style>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function(){
		/*初始化，加载省市区*/
		$.ajax({
			type: 'GET',
			url: 'data.json',
			dataType: 'json',
			success: function(data){
            	var htmlProvince = '';
            	province = data.province;
            	city = data.city;
            	district = data.district;
            	for(var i=0; i<province.length;i++){
				  	htmlProvince += '<option value="'+province[i].id+'">'+province[i].name+'</option>';
				}
				$('#province').append(htmlProvince);
            },
            error: function(){
            	console.log('请求失败');
            }
        });
		/*选择省*/
        $('#province').change(function(){
        	var code = $(this).val();
        	if(code!=''){
        		var cityCode  = city[code][0].id;
        		var htmlCity = '',
        			htmlDistrict = '';
        		for(var i=0; i<city[code].length;i++){
				  	htmlCity += '<option value="'+city[code][i].id+'">'+city[code][i].name+'</option>';
				}
        		$('#city').html(htmlCity);
        		
        		for(var i=0; i<district[cityCode].length;i++){
				  	htmlDistrict += '<option value="'+district[cityCode][i].id+'">'+district[cityCode][i].name+'</option>';
				}
        		$('#district').html(htmlDistrict);
        	}else{
        		$('#city,#district').html('');
        	}
        });

		/*选择市*/
		$('#city').change(function(){
			var cityCode = $(this).val();
        	var htmlDistrict = '';
    		for(var i=0; i<district[cityCode].length;i++){
			  	htmlDistrict += '<option value="'+district[cityCode][i].id+'">'+district[cityCode][i].name+'</option>';
			}
    		$('#district').html(htmlDistrict);
		});
	});
</script>
</head>
<body>
	<div class="select-box">
		<select id="province"><option value="">请选择省份</option></select> 
		<select id="city"></select> 
		<select id="district"></select> 
	</div>
</body>
</html>